<template>
  <div id="access" style="background-image: url('/static/background/background.png'); min-height: 99vh; position: relative;">
    <el-row>
      <el-col :span="12" class="class1">
        <div id='map_chart' style="height: 42vh"></div>
      </el-col>
      <el-col :span="12" class="class1">
        <div class='table_box' style="margin-right: 20px;">
          <div style="color: #FFFFFF; font-size: 18px; margin-left: 8px;">云商地域概览</div>
          <el-table
            :header-cell-style="{ background: 'transparent', color: '#606266' }"
            :data="tableData1" height='40vh' border
            v-loading="loading1"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            style="width: 99%; margin-left: 10px; margin-top: 6px; margin-right: 10px;">
            <el-table-column prop="prop1" label="大区"/>
            <el-table-column prop="prop2" label="CPU数量"/>
            <el-table-column prop="prop3" label="内存数量"/>
            <el-table-column prop="prop4" label="存储数量"/>
          </el-table>
        </div>
      </el-col>
      <el-col :span="12" class="class1">
        <div id='pie_chart' style="height: 42vh"></div>
      </el-col>
      <el-col :span="12" class="class1">
        <div class='table_box' style="margin-right: 20px;">
          <div style="color: #FFFFFF; font-size: 18px; margin-left: 8px;">云商信息概览</div>
          <el-table
            :header-cell-style="{ background: 'transparent', color: '#606266' }"
            v-loading="loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            :data="tableData" height='40vh' border
            style="width: 99%; margin-left: 10px; margin-top: 6px; margin-right: 10px;">
            <el-table-column prop="prop1" label="云商-资源"/>
            <el-table-column prop="prop2" label="使用量"/>
            <el-table-column prop="prop3" label="剩余量"/>
            <el-table-column prop="prop4" label="总量"/>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/javascript" src="js/china.js"></script>
<script>
import echarts from 'echarts'
import full100000 from './js/100000_full.json'

export default {
  name: 'panel',
  data() {
    return {
      loading: false,
      loading1: false,
      dataset: {
        resource: {
          name: '资源接入量',
          data: [
            {"name": "新疆维吾尔自治区", "value": 3000},
            {"name": "上海市", "value": 9500},
            {"name": "广东省", "value": 8500},
            {"name": "江苏省", "value": 8200},
            {"name": "北京市", "value": 7000},
            {"name": "天津市", "value": 7000},
            {"name": "浙江省", "value": 6800},
            {"name": "湖北省", "value": 6800},
            {"name": "山东省", "value": 5600},
            {"name": "福建省", "value": 5600},
            {"name": "湖南省", "value": 4400},
            {"name": "河南省", "value": 4200},
            {"name": "重庆市", "value": 4200},
            {"name": "四川省", "value": 3000},
            {"name": "陕西省", "value": 3100},
            {"name": "安徽省", "value": 3000},
            {"name": "河北省", "value": 2900},
            {"name": "辽宁省", "value": 2800},
            {"name": "山西省", "value": 1800},
            {"name": "吉林省", "value": 1700},
            {"name": "黑龙江省", "value": 600},
          ]
        }
      },
      tableData: [{
        prop1: '阿里云-CPU',
        prop2: '100',
        prop3: '200',
        prop4: '300'
      },{
        prop1: '腾讯云-CPU',
        prop2: '120',
        prop3: '250',
        prop4: '370'
      },{
        prop1: '火山云-CPU',
        prop2: '220',
        prop3: '350',
        prop4: '570'
      },{
        prop1: '联通云-CPU',
        prop2: '250',
        prop3: '380',
        prop4: '630'
      },{
        prop1: '华为云-CPU',
        prop2: '250',
        prop3: '380',
        prop4: '630'
      }],
      tableData1: [{
        prop1: '阿里云-华东大区',
        prop2: '100 核心',
        prop3: '100 GB',
        prop4: '2000 GB'
      },{
        prop1: '腾讯云-华东大区',
        prop2: '150 核心',
        prop3: '200 GB',
        prop4: '2500 GB'
      },{
        prop1: '华为云-华东大区',
        prop2: '150 核心',
        prop3: '200 GB',
        prop4: '2500 GB'
      },{
        prop1: '联通云-华东大区',
        prop2: '200 核心',
        prop3: '220 GB',
        prop4: '2200 GB'
      },{
        prop1: '火山云-华东大区',
        prop2: '120 核心',
        prop3: '200 GB',
        prop4: '2000 GB'
      }]
    }
  },
  methods: {
    initMapChart() {
      let _self = this
      // 画布初始化
      var chartDom = document.getElementById('map_chart');
      var myChart = echarts.init(chartDom);
      // 隐藏数据刷新动画
      // myChart.hideLoading();
      // 注册可用的地图
      echarts.registerMap('CN', full100000);
      let option = {
        title: {
          text: '接入区域分布',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 18
          },
        },
        // 提示框组件
        tooltip: {
          trigger: 'item',
          show: true,
          //触发类型：数据项图形触发
          padding: 10,
          borderWidth: 1,
          borderColor: '#409eff',
          backgroundColor: 'rgba(255,255,255,0.4)',
          textStyle: {
            color: '#000000',
            fontSize: 12
          },
          formatter: (e) => {
            let a = e.data != null ? e.data.value : 0
            let context = `
               <div>
                   <p><span>资源接入量: </span><span>${a}</span></p>
               </div>
            `;
            return context;
          },
        },
        // 地理坐标系组件
        geo: {
          map: "CN",
          zoom: 1.2,
          show: true,
          roam: false,
          emphasis: {
            label: {
              show: false,
            },
          },
          layoutSize: "100%",
          itemStyle: {
            borderColor: "rgba(147, 235, 248, 1)",
            borderWidth: 2,
            shadowColor: "rgb(90,160,234)",
            shadowOffsetX: 0,
            shadowOffsetY: 10,
            shadowBlur: 10,
          },
        },
        // 视觉映射组件（将数据映射到颜色等视觉元素）
        visualMap: {
          type: 'piecewise', // 分段型
          min: 0, // 最小值
          max: 10000, // 最大值
          text: ['高', '低'], // 两端的文本
          splitNumber: 5, // 分段数量
          maxOpen: true, // 显示 >max 部分
          align: 'left', // 图形在左，文字在右
          showLabel: true, // 显示标注文字
          // orient: 'horizontal', // 水平摆放
          orient: 'vertical',
          inRange: {
            color: ["#8db1f1", "#026aa9"],
          },
          textStyle: {
            color: '#ffffff',
            fontSize: 12,
            fontWeight: 400
          },
        },
        series: [
          {
            type: "map",
            map: "CN",
            aspectScale: 0.75,
            zoom: 1.2,
            label: {
              show: true,
              color: "#ffffff",
            },
            itemStyle: {
              borderColor: "rgba(147, 235, 248, 1)",
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.9,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(17,217,245,0.5)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(10,209,231,0.2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              borderWidth: 1,
            },
            emphasis: {
              label: {
                show: false,
                color: "#ffffff",
              },
              itemStyle: {
                areaColor: "#026aa9",
                borderColor: "#fff",
                borderWidth: 2,
              },
            },
            data: this.dataset.resource.data,
          }
        ]
      }
      myChart.setOption(option);

      // 点击右侧加载省份
      myChart.on('click', function (params) {
        _self.loading1 = true
        // 华北大区
        let _data = [
          {
            regionName: '华北大区',
            list: ['北京', '天津', '山西', '河北', '山东', '内蒙古']
          }, {
            regionName: '东北大区',
            list: ['黑龙江', '吉林', '辽宁']
          }, {
            regionName: '华东大区',
            list: ['江苏', '浙江', '上海', '安徽']
          }, {
            regionName: '华南大区',
            list: ['广东', '广西', '海南', '福建']
          }, {
            regionName: '华中大区',
            list: ['河南', '湖北', '湖南', '江西']
          }, {
            regionName: '西北大区',
            list: ['陕西', '甘肃', '青海', '宁夏', '新疆']
          }, {
            regionName: '西南大区',
            list: ['云南', '贵州', '四川', '西藏', '重庆']
          }, {
            regionName: '中国港澳台',
            list: ['台湾', '香港', '澳门']
          }
        ]
        console.log(params.name)
        // params.name 为省份名称 下面通过data数组 输入省份返回区域名称
        var regionName = _data.find(region => region.list.some(province => params.name.includes(province))).regionName;
        console.log(regionName);

        setTimeout(function () {
          _self.tableData1[0].prop1 = "阿里云-" + regionName
          _self.tableData1[1].prop1 = "腾讯云-" + regionName
          _self.tableData1[2].prop1 = "华为云-" + regionName
          _self.tableData1[3].prop1 = "联通云-" + regionName
          _self.tableData1[4].prop1 = "火山云-" + regionName
          _self.loading1 = false
        }, 1000);
      });
    },
    initPieChart() {
      let _self = this
      var chartDom = document.getElementById('pie_chart');
      var myChart = echarts.init(chartDom);
      let option = {
        title: {
          text: '资源类型统计',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 18
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: [
            '阿里云',
            '华为云',
            '腾讯云',
            '联通云',
            '火山云'
          ],
          textStyle: {
            color: '#FFFFFF',
            fontSize: 12
          },
        },
        toolbox: {
          show: false
        },
        series: [
          {
            name: 'CPU',
            type: 'pie',
            radius: [20, 90],
            center: ['15%', '50%'],
            roseType: 'radius',
            itemStyle: {
              borderRadius: 5
            },
            label: {
              show: false
            },
            data: [
              {value: 40, name: '阿里云'},
              {value: 33, name: '华为云'},
              {value: 28, name: '腾讯云'},
              {value: 23, name: '联通云'},
              {value: 18, name: '火山云'}
            ]
          },
          {
            name: '内存',
            type: 'pie',
            radius: [20, 90],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            data: [
              {value: 10, name: '阿里云'},
              {value: 20, name: '华为云'},
              {value: 30, name: '腾讯云'},
              {value: 23, name: '联通云'},
              {value: 18, name: '火山云'}
            ]
          },
          {
            name: '硬盘',
            type: 'pie',
            radius: [20, 90],
            center: ['85%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 5
            },
            label: {
              show: false
            },
            data: [
              {value: 10, name: '阿里云'},
              {value: 20, name: '华为云'},
              {value: 30, name: '腾讯云'},
              {value: 23, name: '联通云'},
              {value: 18, name: '火山云'}
            ]
          }
        ],
        graphic: [
          {
            type: 'text',
            left: '13%',
            top: '90%',
            style: {
              text: 'CPU',
              fill: '#FFFFFF',
              font: 'bold 14px Microsoft YaHei'
            }
          },
          {
            type: 'text',
            left: '48%',
            top: '90%',
            style: {
              text: '内存',
              fill: '#FFFFFF',
              font: 'bold 14px Microsoft YaHei'
            }
          },
          {
            type: 'text',
            left: '83%',
            top: '90%',
            style: {
              text: '硬盘',
              fill: '#FFFFFF',
              font: 'bold 14px Microsoft YaHei'
            }
          }]
      };
      myChart.setOption(option);
      // 为饼状图的每个扇区添加点击事件
      myChart.on('click', function (params) {
        if (!params.data) {
          // 新增点击标签弹出dialog
          _self.$router.push({name: 'panel2', params: {previousPage: 'pubCloud', routeLevel: 3}})
        } else {
          _self.loading = true
          setTimeout(function () {
            for (let _i = 0; _i < _self.tableData.length; _i++) {
              _self.tableData[_i].prop1 = params.data.name + "-" + params.seriesName
            }
            _self.loading = false
          }, 1000);
        }
      });
    }
  },
  mounted() {
    this.initMapChart();
    this.initPieChart();
  }
}
</script>

<style lang="scss">
.class1 {
  height: 46vh;

  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 8px;

  // border-width: 2px; /* 设置边框粗细 */
  // border-style: solid; /* 设置边框样式 */
  // border-color: red;

  color: red;
  font-size: 30px;
}

.table_box {

  .el-table {
    background-color: rgba(38, 38, 38, 0);
    border-radius: 3px;
    border-color: white;
  }

  .el-table tr {
    background-color: transparent;
    color: white;
  }

  .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  }

  .el-table th {
    background-color: rgba(150, 150, 150, 0.26) !important;
    font-size: 11pt;
  }

  .el-table th .cell {
    color: #ffffff;
    font-size: 11pt;
    height: 19px
  }

  .el-table td {
    border-color: rgba(255, 255, 255, 0.2);
    font-size: 11pt;
  }

  .el-table--enable-row-hover .el-table__body tr:hover td {
    background-color: rgba(38, 38, 38, 0.5) !important;
    color: white !important;
  }

}

</style>
